<template>
    <view class="points-content">
        <!-- 积分管理 -->
        <view class="points-title">
            <view class="mb-40 flex justify-between items-center">
                <view class="tit">客户信息</view>
                <view class="tit flex items-center" @click="toNextPage">
                    <view>编辑资料</view>
                    <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
                </view>
            </view>
            <view class="phonenums">{{memberInfo.name}} <text class="ml-10">{{memberInfo.mobile}}</text></view>
            <view class="birthdate">出生日期: <text class="ml-10">{{memberInfo.birthday}}</text></view>
            <view class="nums">余额: <text class="ml-10">{{memberInfo.balance}}</text></view>
            <view class="flex justify-between items-center" v-if="userInfo.isOpaAuth||role==2">
                <view class="balance-button"  @click="popupOpen(1)">编辑余额</view>
                <view class="balance-button1"  @click="popupOpen(2)">充值</view>
            </view>
        </view>
        <view class="points-info">
            <view class="Rechargetit">充值记录</view>
            <view class="flex justify-between items-center f-24"
                style="color: rgba(0, 0, 0, 0.4); padding: 16rpx 0">
                <view class="cell1">充值时间</view>
                <view class="cell2">充值金额</view>
                <view class="cell3">店员</view>
            </view>
            <view v-for="(item, index) in memberList" :key="index" class="flex justify-between items-center f-24"
                style="color: rgba(0, 0, 0, 0.6); padding: 16rpx 0">
                <view class="cell1">{{item.createTime}}</view>
                <view class="cell2 f-24">{{item.price}}</view>
                <view class="cell3 f-24">{{ item.userName }}</view>
            </view>
            <up-divider v-if="memberList.length>pageSize"  :text="loadStatus"></up-divider>
        </view>
        <up-popup :show="show" :round="10" mode="bottom" @close="pClose" @open="pOpen">
            <view class="flex justify-between items-center f-24 px-24 py-24">
                <view class="popupcancel" @click="pClose">取消</view>
                <view class="popupTit">{{ popupTitle }}</view>
                <view class="popupconfirm" @click="pConfirm">确认</view>
            </view>
            <view class="px-24 pb-84">
                <up-input placeholder="请输入金额" :border="'surround'" v-model="numValue" ></up-input>
            </view>
        </up-popup>
    </view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import test from '@/superant/helper/test.js';
import $helper from '@/superant/helper';
import { getUserInfo } from "@/service";
import { reactive } from 'vue';
import { shopApi } from "@/api";
import { getStorage } from "@/utils/storage";
let role=ref(getStorage('role'))
let show=ref(false)
let popupTitle = ref('编辑余额');
let numValue = ref('')
let memberData = ref('')
let memberList = ref([])
let memberInfo = reactive({
    
})

let userInfo = getUserInfo();
let popupType = ref(1)

let currentPage = ref(1)
let pageSize = ref(15)
let totalCount = ref(0)
let loadStatus = ref('正在加载中')

function popupOpen(type) {   
  show.value = true; 
  if (type == 1) {
    popupTitle.value = '编辑余额';
    popupType.value = 1
  } else if (type == 2) {
    popupTitle.value = '充值';
    popupType.value = 2
  }
}  

function pOpen() {  
  console.log('open');  
  numValue.value =''
}
  
function pClose() {  
  show.value = false; 
}
const pConfirm=(e)=>{
    if (!test.amount(numValue.value)) {
        $helper.toast('请输入正确的金额');
        return;
    }

    let params = {
        isAdd: popupType.value==2?true:false,
        price:numValue.value,
        userId:memberInfo.userId
    }
    shopApi.SHOPOPAMEMBERBALANCE(params).then((res) => {
        if (res.code == 200) {
            uni.showToast({
                title: res.errMsg,
                icon: "none",
                mask: true
            });
            getData(1)
            getDetails()
        }else{
            uni.showToast({
                title: res.errMsg,
                icon: "none",
                mask: true
            });
        }
    });
    show.value = false
}
const cancel = ()=>{
    // console.log('cancel');
    show.value = false
}
onLoad((options) => {
    console.log("url参数", options);
    uni.setNavigationBarTitle({
        title: options.id ? "编辑店员资料" : "添加店员"
    });
    // 编辑回显
    if (options.id) {
        memberInfo.userId=options.id
        getDetails()
        getData(1)
    }
});

onShow(() => {

  if (memberInfo.userId) {
        getDetails()
        getData(1)
    }
});

const getDetails = (type)=>{
    shopApi.SHOPGETMEMBERBYID({id:memberInfo.userId}).then((res) => {
        if (res.code == 200) {
            memberInfo.name=res.result.name
            memberInfo.balance= res.result.balance
            memberInfo.birthday = res.result.birthday;
            memberInfo.mobile=res.result.mobile
            memberData.value = res.result
        }else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
    })
}

const getData = (type)=>{
    let params = {
        currentPage:currentPage.value,
        id: memberInfo.userId,
        pageSize:pageSize.value
    }
    shopApi.SHOPGETINDEXSTUDYDATA(params).then((res) => {
    if (res.code == 200) {
      if (type == 1) {
        memberList.value = res.result.data
        totalCount.value = res.result.totalCount
      } else {
        memberList.value = memberList.value.concat(res.result.data)
      }
    }else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
}

// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (memberList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2)
});

// 下拉刷新
onPullDownRefresh(() => {
  uni.showToast({
    title: "下拉刷新",
    icon: "none",
    duration: 1000
  });
  loadStatus.value = "正在加载中";
  currentPage.value = 1
  totalCount.value = 0
  isloading.value = false

  memberList.value = [];
  getDetails()
  getData(1)
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 2000);
});

const toNextPage = () => {
    uni.navigateTo({
        url: `/pagesshop/member/info?item=${JSON.stringify(memberData.value)}`
    });
};
</script>
<style lang="scss">
page {
    background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.points-content {
    padding: 24rpx;
    box-sizing: border-box;
    overflow-y: hidden;

    .points-title {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 16rpx 32rpx;
        box-sizing: border-box;
        margin-bottom: 24rpx;
        position: sticky;
        top: 0;
        .tit {
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            color: rgba(0, 0, 0, 0.6);
        }
        .phonenums{
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: 24rpx;
        }
        .birthdate{
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 24rpx;
        }

        .nums {
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
            color: rgba(214, 142, 68, 1);
            margin-bottom: 30rpx;
        }

        .chevronright{
            width: 32rpx;
            height: 32rpx;
        }
        .balance-button{
            width: 160rpx;
            padding: 6rpx 12px;
            box-sizing: border-box;
            border-radius: 20px;
            border: 1px solid rgba(214, 142, 68, 1);
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            text-align: center;
            color:  rgba(214, 142, 68, 1);
            margin-right: 24rpx;
        }
        .balance-button1{
            width: calc( 100% - 160rpx - 24rpx);

            padding: 6rpx 12px;
            box-sizing: border-box;
            border-radius: 20px;
            border: 1px solid rgba(214, 142, 68, 1);
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            text-align: center;
            color:  #fff;
            background: rgba(214, 142, 68, 1);
        }
    }

    .points-info {
        width: 100%;
        border-radius: 16rpx;
        padding: 16rpx 32rpx;
        box-sizing: border-box;
        background-color: #fff;
        z-index: 1;
        .Rechargetit{
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            text-align: left;
            color: rgba(0, 0, 0, 0.9);
        }   
        .cell1{
            width:260rpx;
            text-align: left;
        }
        .cell2{
            width:220rpx;
            text-align: center;
        }
        .cell3{
            // width:250rpx;
            width:calc( 100% - 260rpx - 220rpx);
            text-align: right;
        }
    }

    .popupcancel{
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: rgba(0, 0, 0, 0.9);
    }
    .popupconfirm{
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        text-align: right;
        color: rgba(193, 122, 50, 1)
    }
    .popupTit{
        font-family: PingFang SC;
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        text-align: right;
        color:rgba(0, 0, 0, 0.9);
    }
}
</style>